<!-- 设备维保 -->
<template>
  <div>
    <van-tabs v-model="active">
     <!--  <van-tab title="待维保">
          <div class="facility" v-for="(el, i) of awaitingList" :key="i">
            <div class="message">
              <div>{{ el.processVariables.xiangmu_name }}</div>
              <div>
                <span>{{el.processVariables.weibao_name}}</span>
                <span>{{ el.executionId }}</span>
                <span>{{el.time || '/'}}</span>
                <span>{{ el.assignee }}</span>
              </div>
            </div>
            <van-button @click="startMaintain(el)">开始维保</van-button>
          </div>
      </van-tab> -->
      <van-tab title="维保中">
        <!-- <van-pull-refresh
          v-model="maintenanceLoading"
          @refresh="maintenanceRefresh"
        > -->
          <div class="facility" v-for="(el, i) of awaitingList" :key="i">
            <div class="message">
              <div>{{ el.processVariables.itemName }}</div>
              <div>
                <!-- <span>{{el.processVariables.ownerName}}</span> -->
                <span>{{ el.processVariables.itemNo }}</span>
                <!-- 设备编号 -->
                <span>{{ el.processVariables.firstTime }}</span>
                <!-- 填报人 -->
                <!-- <span>{{ el.processVariables.owner }}</span> -->
              </div>
            </div>
            <van-button @click="look(el)">填写维保单</van-button>
          </div>
        <!-- </van-pull-refresh> -->
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { task, GetTaskVariables, getAvueForm, putAvueForm /* getUser */ } from '@/api/index'

import { Tab, Tabs, Button, PullRefresh, Notify } from 'vant'

export default {
  data () {
    return {
      active: 0,
      awaitingList: [],
      awaitingListLoding: false,
      maintenanceLoading: false,
      personId: ''
    }
  },

  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [PullRefresh.name]: PullRefresh,
    [Notify.name]: Notify
  },

  computed: {},
  created () {
    this.getUserInfo()
    this.task({
      processCategory: 'maintain',
      tenantId: window.localStorage.getItem('tenantId'),
      taskNameList: '维保',
      conditionKey: 'owner',
      conditionValue: window.localStorage.getItem('personId'),
      withVariables: true
    })
  },
  watch: {
    active () {
      switch (this.active) {
        case 0:
          this.task({
            processCategory: 'maintain',
            tenantId: window.localStorage.getItem('tenantId'),
            taskNameList: '抢单'
          })
          break
        case 1:
          this.task({
            processCategory: 'maintain',
            tenantId: window.localStorage.getItem('tenantId'),
            taskNameList: '维保',
            conditionKey: 'owner',
            conditionValue: window.localStorage.getItem('personId'),
            withVariables: true
          })
          break
      }
    }
  },
  methods: {
    getUserInfo () {
      const { personId } = this.$route.query
      this.personId = personId
    },
    async startMaintain (el) {
      const data = {
        processId: el.processDefinitionId,
        taskId: el.id,
        tenantId: window.localStorage.getItem('tenantId')
      }
      const form = await getAvueForm(data)
      // 更新流程
      if (Array.isArray(form) && form.length === 0) { // 如果有表单
        const data = {
          taskId: el.id,
          variables: {
            owner: window.localStorage.getItem('personId')
          },
          complete: 1
        }
        await putAvueForm(data)
        // 重新获取数据
        Notify({ type: 'success', message: '以开始维保' })
        this.task({
          processCategory: 'maintain',
          tenantId: window.localStorage.getItem('tenantId'),
          taskNameList: '抢单'
        })
      } else {

      }
    },
    async look (el) {
      const flowData = {
        processId: el.processDefinitionId,
        taskId: el.taskDefinitionKey, // 任务id
        tenantId: window.localStorage.getItem('tenantId'),
        type: 'pc'
      }
      const { detail } = await getAvueForm(flowData)
      this.$router.push({
        path: '/maintainContent',
        query: {
          formData: el.processVariables,
          config: detail,
          taskId: el.id,
          type: '维保'
        }
      })
    },
    task (data) {
      task(data).then((res) => {
        this.awaitingListLoding = false
        this.maintenanceLoading = false
        const { list } = res
        console.log(res)
        // this.replaceData(list)
        this.awaitingList = list
        console.log(list, 'awaitingList')
      })
    },
    /*  replaceData (list) {
      if (Array.isArray(list) && list.length !== 0) {
        console.log(list, '阿斯蒂芬')
        list.forEach(el => {
          if (el.processVariables.initiator) {

          }
        })
      }
    }, */
    GetTaskVariables (data) {
      GetTaskVariables(data).then((res) => {
        console.log(res)
      })
    },
    awaitingListRefresh () {
      this.awaitingListLoding = true
      this.task({
        processCategory: 'maintain',
        tenantId: window.localStorage.getItem('tenantId'),
        taskNameList: '分配'
      })
    },
    maintenanceRefresh () {
      this.maintenanceLoading = false
      this.task({
        processCategory: 'maintain',
        tenantId: window.localStorage.getItem('tenantId'),
        taskNameList: '维保'
      })
    }
  }
}
</script>
<style lang='less' scoped>
.facility {
  height: 100px;
  border-bottom: 1px solid rgba(242, 242, 242, 1);
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  .message {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // height: 40px;
    > :last-child {
      margin-top: 10px;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      > span {
        margin-top: 5px;
      }
    }
  }
}
</style>
